.animate-rotate-340 {
  transition: all 1s;
  &:hover {
    color: #fe9002;
    transform: scale(1.3) rotate(-360deg);
  }
}

.animate-rotate-40 {
  transition: all .4s;
  &:hover {
    color: #fe9002;
    transform: rotate(-20deg);
  }
}


.project-icon:hover {
  animation: 1s jello forwards;
}


// 下划线
.transition-font {
  line-height: 1.2;
  display: inline-block;
  transition: all .4s;
  &:hover {
    color: #fe8927;
  }
  &:after {
    display: block;
    content: "";
    height: 2px;
    width: 0;
    background: rgb(254, 190, 55);
    transition: width .2s ease-in-out;
  }
  &:hover:after,
  &:focus:after{
    width: 100%;
  }
}

// 抖动
.transition-sk {
  transition: all .4s;
  &:hover {
    color: #fe9002;
    animation: sk .7s infinite linear;
  }
}
.animate-sk {
  animation: sk .7s ease-out;
}

@keyframes sk {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
}

